<template>
    <div class="material-custom file-info">
        <pui-dialog :maskClick="false" :title="props.title" v-model="componentRef.dialogVisible" :animate="props.animate" isFooter @onCancel="closeDialog">
            <template #content>
                <div class="content">
                    <div class="growth">
                        <div class="title">生长层材料</div>
                        <div class="form">
                            <div class="form-item">
                                <div class="label">材料元系组成:</div>
                                <pui-radio-group v-model="componentRef.materialData.systemMaterial" :list="componentRef.systemMaterialList"></pui-radio-group>
                            </div>
                            <div class="form-item">
                                <div class="label">基础二元系材料:</div>
                                <div class="pui-checkbox-group">
                                    <pui-checkbox v-for="(item, i) in componentRef.baseMaterialList" v-model="componentRef.materialData.baseMaterial[i]" :key="i" :label="item.label" size></pui-checkbox>
                                </div>
                            </div>
                            <div class="form-item">
                                <div class="label">定义材料组分:</div>
                                <div class="custom-text">In(x)Ga(1-x)As</div>
                            </div>
                        </div>
                    </div>
                    <div class="base">
                        <div class="title">基底材料</div>
                        <div class="form">
                            <div class="form-item" style="margin-bottom: 8px;">
                                <pui-selector :dataList="componentRef.materialList" v-model="componentRef.materialData.material"></pui-selector>
                            </div>
                            <div class="form-item">
                                <div class="base-list list">
                                    <div class="item" v-for="(item, i) in componentRef.baseList" :key="i">
                                        <span class="name">{{ item.title }}{{ item.subTitle ? '-' +item.subTitle : '' }}</span>
                                        <span class="value">{{ item.value }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
            <template #footer>
                <pui-button @click="submitHandle" type="primary">确定</pui-button>
                <pui-button @click="closeDialog">取消</pui-button>
            </template>
        </pui-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
    name: 'MaterialCustom'
})
</script>
<script lang="ts" setup>
import { reactive, getCurrentInstance, watch } from 'vue'
const { proxy } = getCurrentInstance() as any
const props = defineProps({
    title: {
        type: String,
        default: '自定义材料'
    },
    animate: {
        type: String,
        default: 'fade'
    }
})
const emit = defineEmits({
    onClose: (val: any) => {}
})
const componentRef = reactive({
    dialogVisible: false,
    materialList: [
        {
            value: '1',
            label: 'GaAs'
        },
        {
            value: '2',
            label: 'InP'
        },
    ],
    systemMaterialList: [
        {
            value: '1',
            label: '三元系'
        },
        {
            value: '2',
            label: '四元系'
        },
    ],
    baseMaterialList: [
        {
            value: '1',
            label: 'GaAs',
            check: false
        },
        {
            value: '2',
            label: 'InP',
            check: false
        },
        {
            value: '3',
            label: 'InAs',
            check: false
        },
        {
            value: '4',
            label: 'GaP',
            check: false
        },
    ],
    baseList: [
        {title: '品格常数',subTitle: 'a[A](300K)', value: '5.6533'},
        {title: '品格常数',subTitle: '热膨胀系数[A/K]', value: '3.88*10^(-5)'},
        {title: '带隙',subTitle: 'Eg(0K)[eV]', value: '1.519'},
        {title: '带隙',subTitle: 'Eg(300K)[eV]', value: '1.424'},
        {title: '带隙',subTitle: 'α[10^(-3)eV/K]', value: '0.5405'},
        {title: '带隙',subTitle: 'β[K]', value: '204'},
        {title: '自旋-轨道分裂能[eV]',subTitle: null, value: '0.34'},
        {title: 'VBO[eV]',subTitle: null, value: '-0.80'},
        {title: '光学矩阵元参数Ep[eV]',subTitle: null, value: '25.7'},
        {title: '有效质量参数',subTitle: 'me*/m0', value: '0.067'},
        {title: '有效质量参数',subTitle: 'mhh*/m0', value: '0.50'},
        {title: '有效质量参数',subTitle: 'mlh*/m0', value: '0.087'},
        {title: '有效质量参数',subTitle: 'γ1', value: '6.98'},
        {title: '有效质量参数',subTitle: 'γ2', value: '2.06'},
        {title: '形变势能参数',subTitle: 'ac[eV]', value: '-7.17'},
        {title: '形变势能参数',subTitle: 'av[eV]', value: '1.16'},
        {title: '形变势能参数',subTitle: 'b[eV]', value: '-1.7'},
        {title: '形变势能参数',subTitle: 'C11[10^(11)dyne/cm²]', value: '11.88'},
        {title: '形变势能参数',subTitle: 'C12[10^(11)dyne/cm²]', value: '5.37'},
        {title: '相对介电系数εγ',subTitle: null, value: '13.1'},
        {title: '迁移率(300K)',subTitle: 'μn[cm²/V·s]', value: '9200'},
        {title: '迁移率(300K)',subTitle: 'μp[cm²/V·s]', value: '400'},
    ],
    materialData: {
        systemMaterial: '1',
        baseMaterial: ['1','2'],
        material: '1'
    },
}) as any
const init = () => {
    componentRef.dialogVisible = true
}
const closeDialog = () => {
    componentRef.dialogVisible = false
    emit('onClose', '关闭')
}
const submitHandle = () => {

}

defineExpose({
    init
})
</script>
<style lang="scss">
@import '../fileControl/fileStyle.scss';
</style>